<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=320.1, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<title>Simple Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ibox.css" media="all" />

<style type="text/css">
    .section {
        margin: 35px 0;
        background-color: #ffffff;
        border-color: #c8c8c8;
        border-width: 1px 0;
        -webkit-border-image: url("../share/border.png") 2 0;
        border-image: url("../share/border.png") 2 0;
    }

    .section .cell {
        position: relative;
        margin-left: 15px;
        height: 43px;
        border-color: #c8c8c8;
        border-width: 0 0 1px 0;
        -webkit-border-image: url("../share/border-bottom.png") 0 0 2 0;
        border-image: url("../share/border-bottom.png") 0 0 2 0;
    }

    .section .cell.ico {
        margin-left: 60px;
    }

    .section .cell:nth-last-child(1) {
        border-bottom-width: 0;
    }

    .section .cell span {
        position: absolute;
        top: 10px;
        left: 0;
        font: normal 17px "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #000000;
    }

    .section .cell span {
        position: absolute;
        top: 10px;
        left: 0;
        right: 25px;
        font: normal 17px "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #000000;
    }

    .section .cell .next {
        position: absolute;
        top: 14px;
        right: 9px;
        width: 8px;
        height: 13px;
        background-image: url("../share/next.png");
        background-size: 8px 13px;
    }

    .section .cell .icon {
        position: absolute;
        top: 7px;
        left: -44px;
        width: 29px;
        height: 29px;
        background: url("../share/icons.png") no-repeat;
        background-size: 145px 116px;
    }

    .section .cell .icon.i1 {
        background-position: 0px 0px;
    }

    .section .cell .icon.i2 {
        background-position: -29px 0px;
    }

    .section .cell .icon.i3 {
        background-position: -58px 0px;
    }

    .section .cell .icon.i4 {
        background-position: -87px 0px;
    }

    .section .cell .icon.i5 {
        background-position: -116px 0px;
    }

    .section .cell .icon.i6 {
        background-position: 0px -29px;
    }

    .section .cell .icon.i7 {
        background-position: -29px -29px;
    }

    .section .cell .icon.i8 {
        background-position: -58px -29px;
    }

    .section .cell .icon.i9 {
        background-position: -87px -29px;
    }

    .section .cell .icon.i10 {
        background-position: -116px -29px;
    }

    .section .cell .icon.i11 {
        background-position: 0px -58px;
    }

    .section .cell .icon.i12 {
        background-position: -29px -58px;
    }

    .section .cell .icon.i13 {
        background-position: -58px -58px;
    }

    .section .cell .icon.i14 {
        background-position: -87px -58px;
    }

    .section .cell .icon.i15 {
        background-position: -116px -58px;
    }

    .section .cell .icon.i16 {
        background-position: 0px -87px;
    }

    .section .cell .icon.i17 {
        background-position: -29px -87px;
    }

    .section .cell .icon.i18 {
        background-position: -58px -87px;
    }

    .section .cell .icon.i19 {
        background-position: -87px -87px;
    }
</style>
</head>

<body>

<script id="settings-tmpl" type="text/tmpl">
    <div class="section">
        <div class="cell ico">
            <span>General</span>
            <div class="icon i1"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Sounds</span>
            <div class="icon i2"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Brightness & Wallpaper</span>
            <div class="icon i3"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Privacy</span>
            <div class="icon i4"></div>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell ico">
            <span>iCloud</span>
            <div class="icon i5"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Mail, Contacts, Calendars</span>
            <div class="icon i6"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Notes</span>
            <div class="icon i7"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Reminders</span>
            <div class="icon i8"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Phone</span>
            <div class="icon i9"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Messages</span>
            <div class="icon i10"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>FaceTime</span>
            <div class="icon i11"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Maps</span>
            <div class="icon i12"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Compass</span>
            <div class="icon i13"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Safari</span>
            <div class="icon i14"></div>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell ico">
            <span>iTunes & App Stores</span>
            <div class="icon i15"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Music</span>
            <div class="icon i16"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Videos</span>
            <div class="icon i17"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Photos & Camera</span>
            <div class="icon i18"></div>
            <div class="next"></div>
        </div>
        <div class="cell ico">
            <span>Game Center</span>
            <div class="icon i19"></div>
            <div class="next"></div>
        </div>
    </div>
</script>

<script id="general-tmpl" type="text/tmpl">
    <div class="section">
        <div class="cell">
            <span>About</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Software Update</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>Siri</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Spotlight Search</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Text Size</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Accessibility</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>Usage</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Background App Refresh</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>Auto-Lock</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Passcode Lock</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Restrictions</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>Date & Time</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>Keyboard</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>International</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>iTunes Wi-Fi Sync</span>
            <div class="next"></div>
        </div>
        <div class="cell">
            <span>VPN</span>
            <div class="next"></div>
        </div>
    </div>
    <div class="section">
        <div class="cell">
            <span>Reset</span>
            <div class="next"></div>
        </div>
    </div>
</script>

<script type="text/javascript" src="../share/artTemplate-2.0.1.min.js"></script>
<script type="text/javascript" src="../share/iscroll-lite-5.0.5.min.js"></script>
<script type="text/javascript" src="../../ibox.min.js"></script>
<script type="text/javascript" src="simple.js"></script>

</body>
</html>